<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NetWorx</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var link = $('ul li a'); 
		link.click(function() {
			var pageLink = $(this).attr('href');
			
			$('div.placeholder').load(pageLink);
			return false;
		});
	});
</script>
<style type="text/css">
.profile {
display: inline-block;
padding: 18px;
-moz-border-radius: 10px;
border: 3px solid gray;
}
.profile:hover {
	text-decoration: none;
}
body {
	background-color: #AAAAAA;
}

ul {
	list-style-type: none;
}

a.addComment {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add comment crno.png") no-repeat;
}

a.addComment:HOVER,a.addComment:ACTIVE {
	background: url("add comment belo.png") no-repeat;
}

a.addPicture {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add picture crno.png") no-repeat;
}

a.addPicture:HOVER,a.addPicture:ACTIVE {
	background: url("add picture belo.png") no-repeat;
}

a.addVideos {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("edit personal information crno.png") no-repeat;
}

a.addVideos:HOVER,a.addVideos:ACTIVE {
	background: url("edit personal info belo.png") no-repeat;
}

a.addLink {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add link crno.png") no-repeat;
}

a.addLink:HOVER,a.addLink:ACTIVE {
	background: url("add link belo.png") no-repeat;
}

.mid {
	background-image: url('1.png');
	background-repeat: repeat-x;
	height: 800px;
	width: 70%;
}

.container {
	position: relative;
}

.wrapper {
	width: 860px;
	margin: 0 auto;
}

.colone-left {
	float: left;
	width: 370px;
	margin: 0 20px 0 0;
}

.colone-right {
	float: right;
	width: 470px;
	margin: 0 0 0 0;
}

a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

div.slider {
	width: 250px;
	height: 280px;
	position: relative;
}

div.slider ul {
	margin: 0;
	padding: 0;
}

div.slider ul li img {
	width: 100px;
	height: 150px;
}

div.slider ul li {
	width: 250px;
	list-style: none;
}

.prevBtn {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

.nextBtn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

h1 {
	font-size: 30px;
	color: white;
}
</style>
</head>
<body>

<%
	pageContext.setAttribute("picture", 1);
	pageContext.setAttribute("video", 2);
	pageContext.setAttribute("link", 3);	
%>

	<map name="links">
		<area shape="rect" alt="" coords="14, 0, 260, 50"
			href="ViewPersonsFriendsLoggedUserServlet">
		<area shape="rect" alt="" coords="270, 0, 526, 50"
			href="RegistredUserHomeServlet">
		<area shape="rect" alt="" coords="536, 0, 780, 50" href="ViewWall.jsp">
	</map>

	<div align="center">
		<div class="mid">
			<div class="container">
				<div class="wrapper">
					<div class="header" align="center">
						<img alt="click here to navigate" src="Header.png" usemap="#links">
					</div>
					<div class="header" align="right">
						<a href="LogoutServlet" style="color: white;">Logout</a>
					</div>
					<div class="colone-right">
					
					<c:forEach items="${selectedPersonForMembersBrowsingPosts}" var="post">
								<div style="width: 600px; border-bottom: 1px solid blue;" align="center">
																																			
									<!-- If post is picture -->
									<c:if test="${post.type eq picture}">
										<table border="0" align="center" style="width: 270px; margin-bottom: 0px;">
											<tr>
												<td width="20%" rowspan="2">
													<c:choose>
		    											<c:when test='${post.poster.picture == null}'>
		    												<img align="middle" width="50" height="50" src="anonimus.jpg">
		    											</c:when>
		    											<c:when test='${post.poster.picture != null}'>
		    												<img align="middle" width="50" height="50" 
		    													src="/images/networx/profile/thumbnails/${post.poster.picture}"> 
		    											</c:when>
		    											<c:otherwise>
		    											</c:otherwise>
		    										</c:choose>		
												</td>
												<td width="80%" height="10px;" align="left">
													<b>${post.poster.firstName}&nbsp;${post.poster.lastName}</b>
												</td>
											</tr>				
											<tr>
												<td width="80%" height="10px;" align="left">
													<b>${post.date}</b>
												</td>			
											</tr>
										</table>
										
										<div style="width: 550px;">
											<big><b>${post.title} &nbsp;-&nbsp; ${post.text}</b></big>																			
										</div>	
										<img src="/images/networx/imagePost/${post.content}" width="400px;">
									</c:if>
									
									
									<!-- If post is video -->
									<c:if test="${post.type eq video}">										
										<table border="0" align="center" style="width: 270px; margin-bottom: 0px;">
											<tr>
												<td width="20%" rowspan="2">
													<c:choose>
		    											<c:when test='${post.poster.picture == null}'>
		    												<img align="middle" width="50" height="50" src="anonimus.jpg">
		    											</c:when>
		    											<c:when test='${post.poster.picture != null}'>
		    												<img align="middle" width="50" height="50" 
		    													src="/images/networx/profile/thumbnails/${post.poster.picture}"> 
		    											</c:when>
		    											<c:otherwise>
		    											</c:otherwise>
		    										</c:choose>		
												</td>
												<td width="80%" height="10px;" align="left">
													<b>${post.poster.firstName}&nbsp;${post.poster.lastName}</b>
												</td>
											</tr>				
											<tr>
												<td width="80%" height="10px;" align="left">
													<b>${post.date}</b>
												</td>			
											</tr>
										</table>
										
										<div style="width: 550px;">
											<big><b>${post.title} &nbsp;-&nbsp; ${post.text}</b></big>
										</div>
										
										<object width="400" height="330" align="middle">
  											<param name="movie"
   												   value="${post.content}?version=3&autohide=1&showinfo=0"></param>
  											<param name="allowScriptAccess" value="always"></param>
  											<embed src="${post.content}?version=3&autohide=1&showinfo=0"
         										   type="application/x-shockwave-flash" allowfullscreen="true"
         										   width="400" height="330"></embed>
										</object>										
									</c:if>
									
									
									<!-- If post is link -->
									<c:if test="${post.type eq link}">									
										<table border="0" align="center" style="width: 270px; margin-bottom: 0px;">
											<tr>
												<td width="20%" rowspan="2">
													<c:choose>
		    											<c:when test='${post.poster.picture == null}'>
		    												<img align="middle" width="50" height="50" src="anonimus.jpg">
		    											</c:when>
		    											<c:when test='${post.poster.picture != null}'>
		    												<img align="middle" width="50" height="50" 
		    													src="/images/networx/profile/thumbnails/${post.poster.picture}"> 
		    											</c:when>
		    											<c:otherwise>
		    											</c:otherwise>
		    										</c:choose>				
												</td>
												<td width="80%" height="10px;" align="left">
													<b>${post.poster.firstName}&nbsp;${post.poster.lastName}</b>
												</td>
											</tr>				
											<tr>
												<td width="80%" height="10px;" align="left">
													<b>${post.date}</b>
												</td>			
											</tr>
										</table>
									
										<div style="width: 550px;">
											<big><b>${post.title} &nbsp;-&nbsp; ${post.text}</b></big> <br>							
											<big><b><a href="${post.content}" target="_blank">${post.content}</a></b></big>	
										</div>								
									</c:if>
									
									
									<!-- Ako su prijatelji, prikazujemo formu za komentarisanje postova... -->
									<c:if test="${areFriends eq true}">
									
										<!-- Adding postComment feild -->
										<form action="CommentOnPostLoggedUserOnMembersWallServlet?postID=${post.id}&personID=${selectedPersonForMembersBrowsing.id}" 
											method="post" name="commentOnPostForm">
											
											<table border="0" align="center" style="width: 270px; margin-bottom: 0px;">
												<tr>
													<td width="20%" rowspan="2">
														<c:choose>
			    											<c:when test='${logovaniUser.picture == null}'>
			    												<img align="middle" width="50" height="50" src="anonimus.jpg">
			    											</c:when>
			    											<c:when test='${logovaniUser.picture != null}'>
			    												<img align="middle" width="50" height="50" 
			    												src="/images/networx/profile/thumbnails/${logovaniUser.picture}"> 
			    											</c:when>
			    											<c:otherwise>
			    											</c:otherwise>
			    										</c:choose>	
													</td>
													<td width="80%" height="10px;" align="left">
														<b>Write Comment:</b>
													</td>
												</tr>				
												<tr>
													<td width="80%" height="10px;" align="left">
														<input type="text" name="commentText">
														<input type="submit" value="Okay">
													</td>			
												</tr>
											</table>
										</form>		
									</c:if>
									
									<!-- showing comments -->
									<c:forEach items="${post.comments}" var="comment">							
										<div style="width: 400px;">									
											<table border="0" align="center" style="width: 400px; margin-bottom: 0px;">
												<tr>
													<td width="15%" rowspan="2">
														<c:choose>
					    									<c:when test='${comment.commetator.picture == null}'>
					    										<img align="middle" width="50" height="50" src="anonimus.jpg">
					    									</c:when>
					    									<c:when test='${comment.commetator.picture != null}'>
					    										<img align="middle" width="50" height="50" 
					    										src="/images/networx/profile/thumbnails/${comment.commetator.picture}"> 
					    									</c:when>
					    									<c:otherwise>
					    									</c:otherwise>
		    											</c:choose>	
													</td>
													<td width="85%" height="10px;" align="left">
														<b>${comment.commetator.firstName}&nbsp;${comment.commetator.lastName}
															&nbsp;&nbsp;${comment.date}</b>
													</td>
												</tr>				
												<tr>
													<td width="85%" height="10px;" align="left">${comment.text}</td>	
												</tr>
											</table>
										</div>
									</c:forEach>				
								</div>
							</c:forEach>	
							
							<c:if test="${empty selectedPersonForMembersBrowsingPosts}">
								<b style="color: red">&nbsp;There Is No Posts.</b>
							</c:if>

					</div>
					<div class="colone-left" style="height: 383px; width: 265px;">
					
						<div style="float:left">
			    				<img align="middle" src="/images/networx/profile/thumbnails/${selectedPersonForGuestBrowsing.picture}">
							<p style="color: white; text-align:left;">
								${logovaniUser.firstName} is viewing ${selectedPersonForGuestBrowsing.firstName} selected posts
							</p>

							<ul style="display: block; float: left;">
							<li><a class="addPicture" href="AddPictureToFriend.jsp"> &nbsp;
							</a></li>
							<li><a class="addVideos" href="AddVideoToFriend.jsp">
									&nbsp; </a></li>
							<li><a class="addLink" href="AddLinkToFriend.jsp"> &nbsp; </a>
							</li>
						</ul>
						</div>
						
						<div style="float: left">
							<div class="placeholder"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
